<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>data-filter</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!-- 列表渲染过滤 -->
            <input type="text" placeholder="请输入关键字" v-model="keyword" />
            <ul>
                <li v-for="(person, index) in newPersons" :key="person.id">
                    {{person.id}} --- {{person.name}} --- {{person.age}}
                    <input :value="person.age" />
                </li>
            </ul>
            <!-- TODO:实现过滤数据的排序 -->
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        keyword: '',
                        persons: [
                            { id: 1, name: 'zhaoliying', age: 33 },
                            { id: 2, name: 'yangmi', age: 34 },
                            { id: 3, name: 'qiwei', age: 40 },
                            { id: 4, name: 'dilireba', age: 20 },
                        ],
                    };
                },
                computed: {
                    newPersons() {
                        // push pop  shift unshift splice
                        // concat  slice
                        // sort  reverce
                        // indexOf  lastIndexOf

                        // forEach  map  filter
                        // find findIndex
                        // some  every  reduce

                        // 至少写出数组的5个方法

                        // filter
                        // 函数或者方法   三要素：功能  参数  返回值
                        // 功能：从原数组当中过滤出符合条件的项 组成一个新数组
                        // 参数：回调函数(item,index,arr) 返回的是一个布尔值的表达式
                        // 返回值： 返回的就是符合条件的所有项组成的新数组
                        let { keyword, persons, sortType } = this;
                        // let arr = persons.filter(function(item,index){
                        //   return item.name.indexOf(keyword) !== -1
                        // })
                        let arr = persons.filter(
                            (item) => item.name.indexOf(keyword) !== -1
                        );

                        return arr;
                    },
                },
            });
        </script>
    </body>
</html>
